<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link href="./css/estilos.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="js/jquery-1.5.js"></script>
        <script type="text/javascript" src="js/modificar.js"></script>
        <script type="text/javascript" src="js/subir.js"></script>

        <title>JSP Page</title>
    </head>
    <body>
        <f:view>
            <div id="contenido">
                <jsp:include page="cabecera.jsp"/>
                <jsp:include page="izquierda.jsp"/>


                <div id="columnaCentral" style="padding-left: 10px;">
                    <h:form>
                     <h:commandButton styleClass="botonUpload" action="#{mostrarMultimediaBean.doSubir}">
                     </h:commandButton>

                    <h:commandButton action="#{mostrarMultimediaBean.doPublicar}">
                     </h:commandButton>

                            <div id="guardar" style="display:none;">
                                <h:inputText id="titulo" value="#{mostrarMultimediaBean.titulo}" size="40"  />
                                <h:commandButton styleClass="botonGuardar" action="#{mostrarMultimediaBean.doCambiarTitulo}" >

                                </h:commandButton>
                            </div>

                            <div style="padding-left: 16%" id="editar">
                                <h:outputText value="#{mostrarMultimediaBean.multimedia.titulo}"  />
                                &nbsp;&nbsp;
                                <img onclick="accion()" src="images/editar.png" width="30px" height="30px" alt="" />

                            </div>
                        </h:form>

                    <div style="text-align:center;">

                        <h:inputHidden id="ocultoCodificado" value="#{mostrarMultimediaBean.codificado}" />
                        <h:inputHidden id="ocultoTipo" value="#{mostrarMultimediaBean.elemento}" /> <br />

                        <div style="display:block; margin-left: 15%;z-index: 0;"><iframe  style="display:block;" id="frame" height="500" width="500" frameborder="1" allowfullscreen>
                            </iframe></div>

                        <script type="text/javascript">
                            document.getElementById("frame").src=
                                document.getElementById("ocultoTipo").value+
                                document.getElementById("ocultoCodificado").value;

                        </script>
                        <h:form prependId="false">
                            <div style="left:40%">


                                <h:commandButton styleClass="botonPrev" action="#{mostrarMultimediaBean.doPrevious}">

                                </h:commandButton>
                                <h:commandButton styleClass="botonNext" action="#{mostrarMultimediaBean.doNext}">

                                </h:commandButton>

                            </div>
                        </h:form>
                        </div>


                         <br />
                        <div style="float:left;">
                            <h:form>
                            <div onclick="desplegable('comentarioCuerpo')"></div>
                            <div style="padding-left: 10px" id="comentarioCuerpo">
                                Comentarios: <br/>
                                <h:inputTextarea cols="50" rows="4" value="#{mostrarMultimediaBean.nuevoComentario}" />
                                <br/>
                                <h:commandButton styleClass="botonComentar" action="#{mostrarMultimediaBean.doComentar}">

                                </h:commandButton>

                            <br />

                                <c:forEach items="#{mostrarMultimediaBean.listaComentarios}" var="com">
                                    <table>
                                        <thead>
                                        <th><h:outputLabel value="#{com.comentario.usuario.perfil.nombre} #{com.comentario.usuario.perfil.apellidos}" />
                                            &nbsp;&nbsp;
                                            <h:outputLabel value="#{com.comentario.fecha}">
                                            <f:convertDateTime pattern="dd/MM/yyy hh:mm" />
                                            </h:outputLabel> </th>
                                        </thead>
                                        <tbody><td>
                                            <h:outputText value="#{com.comentario.contenido}" />
                                        </td></tbody>
                                    </table>

                                </c:forEach>
                            </div>
                        </h:form>
                    </div>

                    <div style="padding-right: 10%;float:right;text-align: left;">
                        <br/>
                        <h:form>
                            <div onclick="desplegable('etiquetarCuerpo')">
                                Etiquetas: <br/>
                            </div>
                            <div id="etiquetarCuerpo" style="display: none;">

                                <h:inputText size="20" value="#{mostrarMultimediaBean.amigo}" styleClass="buscador"  onblur="fill();"
                                             onkeyup="lookup(this.value,#{mostrarMultimediaBean.multimedia.idMultimedia},#{mostrarMultimediaBean.multimedia.usuario.idUsuario});"/>
                                <h:commandButton action="#{mostrarMultimediaBean.doEtiquetar}" styleClass="buscarEtiquetas"/>
                                <div class="suggestionsBox" id="suggestions" style="display: none;">
                                    <div class="suggestionList" id="autoSuggestionsList"></div>
                                </div>

                            </div>

                            <c:forEach items="#{mostrarMultimediaBean.multimedia.etiquetasCollection}" var="et">
                                <a href="perfil.jsp?idAmigo=${et.usuario.perfil.idUsuario}">${et.usuario.perfil.nombre} ${et.usuario.perfil.apellidos}</a>
                                <br/>
                            </c:forEach>

                        </h:form>
                    </div>

                </div>
                <jsp:include page="derecha.jsp"/>
            </div>

            <jsp:include page="pie.jsp"/>
        </f:view>
    </body>